<template>
    <div id="network-topology" style="width: 100%; height: 600px;"></div>
  </template>
  
  <script>
  import * as echarts from 'echarts';
  
  export default {
    name: 'NetworkTopology',
    mounted() {
      this.initChart();
    },
    methods: {
      initChart() {
        const chartDom = document.getElementById('network-topology');
        const myChart = echarts.init(chartDom);
  
        const option = {
          tooltip: {
            formatter: '{b}'
          },
          series: [
            {
              type: 'graph',
              layout: 'none',
              symbolSize: 50,
              roam: true,
              label: {
                show: true,
              },
              edgeSymbol: ['circle', 'arrow'],
              edgeSymbolSize: [4, 10],
              edgeLabel: {
                fontSize: 10
              },
              data: [
                { name: '1', x: 100, y: 500 },
                { name: '2', x: 200, y: 400 },
                { name: '3', x: 400, y: 300 },
                { name: '4', x: 600, y: 500 },
                { name: '5', x: 300, y: 600 },
                { name: '6', x: 500, y: 700 },
                { name: '7', x: 700, y: 600 },
                { name: '8', x: 900, y: 500 },
                { name: '9', x: 800, y: 300 },
                { name: '10', x: 100, y: 300 },
                { name: '11', x: 50, y: 400 },
                { name: '12', x: 600, y: 300 },
              ],
              links: [
                { source: '1', target: '2', label: { show: true, formatter: '13' } },
                { source: '2', target: '3', label: { show: true, formatter: '4' } },
                { source: '3', target: '4', label: { show: true, formatter: '15' } },
                { source: '4', target: '5', label: { show: true, formatter: '11' } },
                { source: '5', target: '6', label: { show: true, formatter: '2' } },
                { source: '6', target: '7', label: { show: true, formatter: '18' } },
                { source: '7', target: '8', label: { show: true, formatter: '16' } },
                { source: '8', target: '9', label: { show: true, formatter: '3' } },
                { source: '9', target: '12', label: { show: true, formatter: '23' } },
                { source: '12', target: '7', label: { show: true, formatter: '5' } },
                { source: '10', target: '11', label: { show: true, formatter: '26' } },
                { source: '11', target: '10', label: { show: true, formatter: '20' } },
                { source: '10', target: '7', label: { show: true, formatter: '8' } },
                { source: '5', target: '3', label: { show: true, formatter: '13' } },
                // Add all the other connections with appropriate labels
              ],
              lineStyle: {
                color: 'source',
                curveness: 0.3,
              }
            }
          ]
        };
  
        myChart.setOption(option);
      }
    }
  };
  </script>
  
  <style scoped>
  #network-topology {
    width: 100%;
    height: 100%;
  }
  </style>
  